/*
 * @Author: your name
 * @Date: 2020-12-11 11:12:41
 * @LastEditTime: 2020-12-17 20:27:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj_steam\src\js\cart\cart.js
 */
require(['../config'], () => {
  require(['swiper', 'template','nav', 'header', 'footer', 'nav','cookie'], (Swiper, template,Nav) => {
    class Cart {
      constructor() {
        this.list = []
        this.allPrice = 0
        this.init()
        this.newSwiper()
        
      }

      init() {
        // 拿到 localStorage 的数据
        this.list = JSON.parse(localStorage.getItem('list'))
        // 渲染数据
        $('#cartItem').html(template('cartItemTemplate', { list: this.list }))

        this.changeCount()
        this.getTotalPrice()
        this.delGood()
        Nav.cartCount()
      }
      
      newSwiper() {
        var swiper = new Swiper('.swiper-container', {
          effect: 'fade',
          fadeEffect: {
            crossFade: true,
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
            renderFraction: function (currentClass, totalClass) {
              return '正在显示第 ' +
                '<span class="' + currentClass + '"></span>' +
                ' / ' +
                '<span class="' + totalClass + '"></span>' +
                ' 个';
            },
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',

          },
        });
      }

      // 改变购物车商品的数量
      changeCount() {
        const _this = this
        // 点击按钮 改变数量
        $('.count-btnBox').click(function(e){

            // 事件委派
            const target = e.target || e.srcElement
            if(target.nodeName === 'BUTTON'){
                const index = $(target).parent().parent().index()
                
                // 判断点的是 - 还是 +
                if($(target).hasClass('reduce')){
                    _this.list[index].count--
                    if(_this.list[index].count <= 1){
                      _this.list[index].count = 1
                    }

                }else{
                    _this.list[index].count++
                }

                // 因为改变了 count 所以要存一下 localStorage
                localStorage.setItem('list',JSON.stringify(_this.list))

                // 存完再重新渲染
                _this.getTotalPrice()
                _this.init()
            } 
        })

        
      }

      // 统计商品的总价
      getTotalPrice() {
          this.allPrice = 0
          if(this.list){
              if(this.list.length){
                this.list.forEach(item => {
                  this.allPrice += item.finalPrice * item.count
                  $('.total-price > span').text(this.allPrice)
                })
              }else{
                $('.total-price > span').text(this.allPrice)
              }
          }else{
            $('.total-price > span').text(this.allPrice)
          }

      }

      // 删除商品
      delGood(){
          const _this = this

          // 删除全部商品
          $('.del-cart-itemAll > em').click(function(){
              localStorage.removeItem('list')
              _this.init()
          })
          
          // 删除单个商品
          $('.cart-item-price').click(function(e){
            
            const target = e.target || e.srcElement
            if(target.nodeName === 'EM'){
                const index = $(target).parent().parent().index()
                _this.list.splice(index , 1)
            }
            
            localStorage.setItem('list',JSON.stringify(_this.list))
            _this.init()
            _this.getTotalPrice()
          })
      }
    }
    return new Cart
  })
})

    // 改变单个商品可以用，多个不行
        // let count = $('#countInput').val()

        // const finalprice = $('.price > span').text(),
        //       originprice = $('.origin-price > span').text(),
        //       finalpriceone = finalprice / count,
        //       originpriceone = originprice / count,
        //       _this = this

        // $('#addBtn').click(function () {
        //   count++
        //   $('#countInput').val(count)
        //   $('.price > span').text(finalpriceone * count)
        //   $('.origin-price > span').text(originpriceone * count)

        //   _this.init()
        // })

        // $('#reduceBtn').click(function () {
        //   count--
        //   if (count <= 1) {
        //     count = 1
        //   }
        //   $('#countInput').val(count)
        //   $('.price > span').text(finalpriceone * count)
        //   $('.origin-price > span').text(originpriceone * count)

        //   _this.init()
        // })